<template>
	<view class="edit_ed">
		<view class="box_conten">
			<view class="logo_pic">
				<view class="tit_text">换绑手机</view>
				<view class="tit_text">你当前手机号为{{store.getters.setProcessingTel}}</view>
			</view>
			<view class="input_ediit">
				<view class="phone">
					<uni-easyinput :clearable="false" placeholderStyle="font-size:28rpx;" maxlength="6"
						v-model="changePhone.code" type="number" placeholder="请输入验证码"></uni-easyinput>
					<view class="code_text" v-if="count==0" @click="getCode">
						获取验证码
					</view>
					<view class="code_text_" v-else>
						({{count}}s)后重新获取
					</view>
				</view>
				<!-- <text>换绑手机号</text> -->
				<uni-easyinput v-model="changePhone.phone" placeholderStyle="font-size:28rpx;"
					placeholder="请输入新手机号" type="number" maxlength="11"></uni-easyinput>
			</view>
			<view class="btn_edit">
				<button type="primary" class="onlogout" @click="changeNameImg"
					:disabled="!(changePhone.phone.length==11&&changePhone.code.length==6)">确认修改</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, onMounted
	} from "vue"
	import store from '@/store_network/index.js'
	import apiUser from '@/util/network_api/user.js'
	import apiCode from '@/util/network_api/getcode.js'

	// 验证码获取秒数
	const count = ref(0) //倒计时 //这是重新获取验证码的倒计时
	const clear = ref(null)
	const changePhone = ref({
		code: '', //用户输入的验证码
		phone: '' //绑定的手机
	})
	const navbarStatusHeight = ref(0)
	const navBarHeight = ref(0)
	const navBarWidth = ref(375)
	onMounted(() => {
		const info = uni.getSystemInfoSync()
		navbarStatusHeight.value = info.statusBarHeight
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect()
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value = (menuInfo.bottom - info.statusBarHeight) + (menuInfo.top - info.statusBarHeight)
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left
		// #endif
	})

	// 获取验证码
	const getCode = async () => {
		if (!/^1[^1^2]\d{9}$/.test(store.state.userInfo.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		count.value = 59
		clear.value = setInterval(() => {
			count.value -= 1
			if (count.value == 0) {
				clearInterval(clear.value)
			}
		}, 1000)
		await apiCode.updateCode({
			phone: store.state.userInfo.phone
		}).then(res => {
			if (res.code === 20000) {
				uni.showToast({
					title: res.message,
					icon: 'none',
					duration: 3000,
					position: 'top',
				})
			}
		})
	}
	const changeNameImg = async () => {
		if (!/^1[^1^2]\d{9}$/.test(changePhone.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		//显示加载框
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		await apiUser.bindingPhone(changePhone.value).then(res => {
			if (res.code == 20000) {
				// 获取用户信息
				store.dispatch('getUpdataUser')
				uni.showToast({
					title: res.message,
					position: 'top',
					icon: 'success',
					duration: 3000
				});
			}
		})
		uni.hideLoading()
	}
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.edit_ed {
		// height: 100vh;
		width: 100%;
		// background-image: url('@/static/network/login/bg_login.png');
		// background-repeat: no-repeat;
		// background-size: cover;
		// background-position: top;

		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			.navbar-content {
				position: relative;
				display: flex;
				align-items: center;
				width: 100%;
				height: 80rpx;

				.back_btn {
					margin-left:24rpx;
					position: relative;
					z-index: 9;
				}

				.navBar {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					font-size: 32rpx;
					font-weight: bold;
					color: #fff;
				}
			}
		}


		.box_conten {
			padding: 30rpx 0 0;

			.logo_pic {
				padding: 60rpx 60rpx 40rpx;

				.tit_text {
					font-weight: bold;

					&:nth-child(2) {
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.6);
						font-weight: normal;
						margin-top: 5rpx;
					}
				}
			}

			.input_ediit {
				margin: 0 60rpx;
				font-size: 28rpx;

				:deep(.is-input-border) {
					border-radius: 0 !important;
					background-color: transparent !important;
					margin: 20rpx 0;
					border: none;
					border-bottom: 1rpx solid #ccc;
					height: 90rpx;

					&.is-focused {

						.uniui-clear,
						.uniui-eye-filled {
							color: #007cff99 !important;
						}
					}
				}

				.phone {
					position: relative;

					.code_text {
						height: 30rpx;
						font-size: 28rpx;
						color: #007cff;
						position: absolute;
						top: calc(50% - 15rpx);
						right: 30rpx;
						z-index: 2;
					}

					.code_text_ {
						height: 30rpx;
						font-size: 28rpx;
						color: #999;
						position: absolute;
						top: calc(50% - 15rpx);
						right: 30rpx;
					}
				}

				.code-input {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.code-input>view {
					margin-top: 5rpx;
					margin-left: 15rpx;
					width: 70rpx;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #313131;
					text-align: center;

					// border-radius: 10rpx;
					&:nth-child(1) {
						margin-left: 0rpx;
					}
				}

				.cinput {
					position: fixed;
					left: -100rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}

			.btn_edit {
				position: absolute;
				margin: 60rpx auto;
				width: 100%;

				:deep(button:after) {
					border: none !important;
				}

				.onlogout {
					font-size: 28rpx;
					// padding: 0rpx 200rpx;
					margin: 0 60rpx;
					height: 80rpx;
					border-radius: 50rpx;
					line-height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #007cff;
				}
			}
		}
	}
</style>